<template>
    <el-form :model="loginUser" :rules="rules" ref="loginForm" label-width="100px" class="loginForm sign-in-form">
      <el-form-item label="用户名" prop="user_name">
        <el-input v-model="loginUser.user_name" placeholder="Enter UserName..." :prefix-icon="UserFilled">
        </el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginUser.password" placeholder="Enter Password..." :prefix-icon="Lock">

        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleLogin('loginForm')" type="primary" class="submit-btn">
          提交
        </el-button>
      </el-form-item>

      <!-- 找回密码 -->
      <div class="tiparea">
        <p>忘记密码？ <a>立即找回</a></p>
      </div>
    </el-form>
</template>

<script lang="ts">

import {getCurrentInstance, ref, unref} from "vue";
import { useRouter, useRoute} from "vue-router";
import { ElNotification } from 'element-plus'
import {Login} from "../api/index"
import {
  UserFilled,
  Lock
} from '@element-plus/icons-vue'
import {loginUser} from "../utils/loginValidators";
export default {
  props: {
    loginUser: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      required: true,
    }
  },
  setup(props:any) {
    // @ts-ignore
    const { ctx } = getCurrentInstance();
    const router = useRouter();
    //触发登录方法
    const handleLogin = (formName) => {
      ctx.$refs[formName].validate((valid: boolean) => {
        if (valid) {
          Login(props.loginUser).then(res=>{
            console.log(res)
            let { code, message } = res.data
            console.log(code)
            let { token } = res.data.data
            localStorage.setItem("myToken", token)
            if(code == 20000){
              ElNotification({
                title: 'Success',
                message: '登录成功',
                type: 'success',
                showClose: false,
                duration: 2000
              })
              //跳转
              localStorage.setItem("token", res.data.data.token);
              localStorage.setItem("user", loginUser.value.user_name);
              localStorage.setItem("ID", res.data.data.user.ID);
              router.push("/front_home/subsidy")
            }else {
              ElNotification({
                title: 'Error',
                message: '账号或密码错误，请重新输入...',
                type: 'error',
                showClose: false,
                duration: 2000
              })
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
    return {
      handleLogin,
      UserFilled,
      Lock
    }
  }
};
</script>

<style scoped>
/* form */
.loginForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 40px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit-btn {
  width: 100%;
}
.tiparea {
  text-align: right;
  font-size: 12px;
  color: #333;
}
.tiparea p a {
  color: #409eff;
}
</style>